<template>
  <div class="box1">
    <el-row class="box2">
      <el-col :span="23" :offset="1">
        <div class="demo-input-size">
          <el-input
            placeholder="请输入藏品名"
            prefix-icon="el-icon-user"
            v-model="input1"
          >
          </el-input>

          <el-button type="primary" class="el-icon-zoom-in" @click="searchUser"
            >搜索</el-button
          >
          <el-button type="info" class="el-icon-refresh" @click="resetUser"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" disabled plain
          >修改</el-button
        >
        <el-button type="danger" icon="el-icon-delete" disabled plain
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column type="selection"> </el-table-column>

          <el-table-column label="藏品编号">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>

          <el-table-column prop="name" label="藏品名"> </el-table-column>

          <el-table-column label="藏品图">
            <template slot-scope="scope">
              <img class="userimg" :src="scope.row.imgsrc" />
            </template>
          </el-table-column>

          <el-table-column prop="count" label="藏品的数量"> </el-table-column>

          <el-table-column prop="sell" label="藏品价格"> </el-table-column>

          <el-table-column prop="createtime" label="藏品创建时间">
          </el-table-column>

          <el-table-column prop="modiftime" label="藏品修改时间">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="
                  openDialog(
                    scope.row.id,
                    scope.row.name,
                    scope.row.count,
                    scope.row.sell,
                    scope.row.imgsrc
                  )
                "
                circle
                style="margin-right: 20px"
              ></el-button>

              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
                @confirm="deleteCollection(scope.row.id)"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  slot="reference"
                  circle
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="13" :offset="1">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalNum"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog :title="checkTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="藏品名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="藏品数量" :label-width="formLabelWidth">
          <el-input v-model="form.count" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="藏品价格" :label-width="formLabelWidth">
          <el-input v-model="form.sell" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="藏品图" :label-width="formLabelWidth">
          <el-upload
            :action="uploadImg"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="uploadUserImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="form.dialogVisible">
            <img width="100%" :src="form.dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="coloseDialog">取 消</el-button>
        <el-button type="primary" @click="submitDialog(form.id)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CollectionApi from "@/api/collection/CollectionApi";
import uploadApi from "@/api/upload/uploadApi"
export default {
  name: "GoodsMange",
  data() {
    return {
      input1: "",
      checkTitle: "添加藏品",
      tableData: [
        {
          id: 1,
          name: "王小虎",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c0cbfbd0f6765d03cb45b5200af26e54_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667615946&t=054ade37270a3b9ac6c193ec89155889",
          sex: "女",
          age: 11,
          iphone: "13294560213",
          emil: "22@qq.com",
          auth: 1,
          status: 1,
          createTime: "2022-1-2",
          modifTime: "2022-3-1",
        },
      ],
      // 当前页
      currentPage: 1,
      // 每页显示的数据条数
      pageSize: 5,
      // 总条数
      totalNum: 10,

      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        count: "",
        sell: "",
        dialogImageUrl: "",
        dialogVisible: false,
      },
      formLabelWidth: "120px",
      uploadImg: ''
    };
  },
  created() {
    this.search();
    this.uploadImg=uploadApi.upload
  },
  methods: {
    searchUser() {
      // 搜索按钮回调
      // console.log(this.input1);
      this.search();
    },
    resetUser() {
      // 重置按钮
      this.input1 = "";
      this.search();
    },

    search() {
      CollectionApi.queryCollection(this.input1).then((res) => {
        console.log(res.data.data);
        // console.log(this.$store.state)
        this.tableData = res.data.data;
        this.totalNum = this.tableData.length;
      });
    },

    deleteCollection(id){
      // console.log(id)
      CollectionApi.deleteCollection(id).then(res => {
        if (res.data.code == 1) {
          // 删除成功
          this.$message.success(res.data.message);
          // 重新查询用户
           this.search();
        } else {
          // 删除失败
          this.$message.error(res.data.message);
        }
      })
    },

    openDialog(id, name, count, sell, dialogImageUrl) {
      console.log(id, name, count, sell);
      this.checkTitle = "修改藏品信息";
      this.dialogFormVisible = true;
      // 将遍历的数据，存到表单
      this.form = {
        id: id,
        name: name,
        count: count,
        sell: sell,
        dialogImageUrl: dialogImageUrl,
      };
 
    },
    coloseDialog() {
      // 关闭弹窗
      this.dialogFormVisible = false;
      // 清除表单信息
      this.form = {};
      this.checkTitle = "添加藏品";
    },
    submitDialog(id) {
      // console.log(id)
      if (typeof id === "number") {
        // console.log("修改");
        CollectionApi.updataCollectio(
          id,
          this.form.name,
          this.form.count,
          this.form.sell,
          this.form.dialogImageUrl
        ).then((res) => {
          console.log(res.data);
          if (res.data.code != 1) {
            this.$message.error(res.data.message);
          }
          // 关闭弹窗并提醒插入成功
          this.coloseDialog();
          this.$message.success(res.data.message);
          // 重新查询全部内容
          this.search();
        });
      } else {
        // console.log("添加");
        CollectionApi.instertCollectio(
          this.form.name,
          this.form.count,
          this.form.sell,
          this.form.dialogImageUrl
        ).then((res) => {
          console.log(res.data);
          if (res.data.code != 1) {
            this.$message.error(res.data.message);
          }
          // 关闭弹窗并提醒插入成功
          this.coloseDialog();
          this.$message.success(res.data.message);
          // 重新查询全部内容
          this.search();
        });
      }
    },
    uploadUserImg(res) {
      // 头像上传成功时的回调
      console.log(res.data);
      this.form.dialogImageUrl = "/User-Img/" + res.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      // 每当选择发送变化时调此回调函数
      this.multipleSelection = val;
      console.log(val);
    },
    rowClick(val) {
      // 当列被点击时触发回调函数
      console.log(val);
    },
    changeSwitch(val) {
      // 用户状态的回调函数
      console.log(val);
    },
    handleSizeChange(val) {
      //每页条数改变时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // 当前页发生改变的回调
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.box1 {
  /* background-color: pink; */
  position: relative;
  top: 25px;
}
.box2 {
  /* background-color: rgb(4, 44, 117); */
  top: 4%;
  left: -5px;
}
.el-row {
  margin-bottom: 20px;
}
.el-input,
.el-select {
  width: 200px;
  margin-right: 50px;
}

.el-table {
  /* background-color: rgb(198, 95, 95); */
}
.el-table::before {
  width: auto;
}
.userimg {
  width: 120px;
  height: 120px;
  border-radius: 20%;
}
</style>
